<template>
	<view class="page">
		<view class="head" @tap="spaceInfo">
			<view class="title">
				<view class="iconfont icon-shijain" style="color: #FDBA00;font-size: 17px;"></view>
				<view class="title-text">
					{{title}}
				</view>
			</view>
		</view>
		<view class="center" @tap="spaceInfo">
			<view class="block">
				<view class="key">
					项目
				</view>
				<view class="value">
					{{project}}
				</view>
			</view>
			<view class="block">
				<view class="key">
					地点
				</view>
				<view class="value">
					{{address}}
				</view>
			</view>
			<view class="block">
				<view class="key">
					时间
				</view>
				<view class="value">
					{{time.replace("T", " ")}}
				</view>
			</view>
			<view class="block">
				<view class="key">
					人数上限
				</view>
				<view class="value">
					{{count}}人
				</view>
			</view>
			<view class="block">
				<view class="key">
					发布者
				</view>
				<view class="value">
					{{publisher}}
				</view>
			</view>
			<view class="count">
				<view class="sex">
					<view class="iconfont icon-male" style="color: #84A6FE;font-size: 16px"></view>
					<view class="sexcount allcount">{{count + '人'}}</view>
				</view>
				<view class="sex woman">
					<view class="iconfont icon-icon-yxj-female" style="color: #FCA8BA;font-size: 16px"></view>
					<view class="sexcount joincount">{{joincount + '人'}}</view>
				</view>
			</view>
		</view>
		<view class="tail-box">
			<button class="tail" style="border: none;" plain="true" @tap="toJoin" v-if="join == 0">参加</button>
			<button class="tail" style="border: none;color: #787993;" plain="true" @tap="toExit" v-if="join == 1">取消参加</button>
			<button class="tail" style="border: none;" plain="true" @tap="showModal">邀请</button>
		</view>
	</view>
</template>

<script>
	
	export default {
		mame: 'spaceCompo',
		data() {
			return {
				widthjoin: {},
				widthall: {}
			}
		},
		props: {
			spaceId: 0,
			title: '',
			project: '',
			count: 0,
			join: 0,
			joincount: 0,
			address: '',
			time: '',
			publisher: ''
		},
		methods: {
			showModal: function() {
				this.$emit('showModal', this.spaceId);
			},
			toJoin(){
				this.$emit('toJoin', this.spaceId);
			},
			toExit(){
				this.$emit('toExit', this.spaceId);
			},
			spaceInfo(){
				this.$emit('spaceInfo', this.spaceId);
			}
		}
	}
</script>

<style>
	
	@import url("../../static/iconfont/iconfont.css");
	
	.page {
		margin-left: 2.5%;
		background-color: white;
		width: 95%;
		border: 1px solid #EAEAEA;
		margin-top: 35upx;
		box-shadow: 3px 3px 13px 0px rgba(0,0,0,0.1);
	}
	/* 头部 start */
	.head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-top: 10upx;
		width: 95%;
		margin-left: 2.5%;
		border-bottom: 1px solid #ECECEC;
	}
	.title {
		color: #25265E;
		display: flex;
		flex-direction: row;
	}
	.title-text {
		margin-left: 20upx;
	}
	.sex {
		display: flex;
		flex-direction: row;
	}
	.woman {
		margin-left: 30upx;
	}
	.count {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.sexcount {
		margin-left: 10upx;
	}
	/* 头部 end */
	
	/* 中部 start */
	.center {
		display: flex;
		flex-direction: column;
		width: 95%;
		margin-left: 2.5%;
		border-bottom: 1px solid #ECECEC;
		font-size: 16px;
		color: #494A79;
		padding-bottom: 20upx;
	}
	.block {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	/* 中部 end */
	
	/* 尾部 start */
	.tail-box {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
	}
	.tail {
		background-color: white;
		text-align: center;
		font-size: 23px;
		width: 50%;
		color: #5080FE;
		margin: 0rpx;
		font-size: 16px;
		outline:noneoutline;
	}
	/* 尾部 end */
</style>